﻿<!--<div id="Div1" class="form-group col-md-10">
<a ng-click="changePnl();" > >>> </a>
</div>-->
<div class="form-group col-md-10">
    <div class="row">
    <label class="control-label" style="font-size:inherit;width:130px;" >Base Info</label>
    </div>
</div>
<div class="form-group col-md-10">

    <div id="divBaseInfo" class="form-group col-md-10" style=" border:1px solid;border-color:#000; width:1200px;height:150px;">
        <div class="row">
        <label class="control-label" style="font-size:inherit;width:130px;" >Customer Code: </label>
        <label class="control-label" style="font-size:smaller;width:130px;" ><a href="" ng-click="AccountInfo('lg',aging,customer.specialNotes)" >{{aging.customerNum}}</a></label>
        <label class="control-label" style="font-size:inherit;width:130px;">Customer Name: </label>
        <label class="control-label" style="font-size:smaller;width:200px;">{{aging.customerName}}</label>
        <label class="control-label" style="font-size:inherit;width:130px;">Legal Entity: </label>
        <label class="control-label" style="font-size:smaller;width:130px;">{{aging.siteCode}}</label>
        <label class="control-label" style="font-size:inherit;width:170px;">Customer Class: </label>
        <label class="control-label" style="font-size:smaller;width:100px;">{{aging.customerClass}}</label>
        </div>
        <div class="row">
        <label class="control-label" style="font-size:inherit;width:130px;">Credit Limit: </label>
        <label class="control-label" style="font-size:smaller;width:130px;">$ {{aging.creditLimit}}</label>
        <label class="control-label" style="font-size:inherit;width:130px;">Total AR Balance: </label>
        <label class="control-label" style="font-size:smaller;width:200px;">$ {{aging.totalAmt}}</label>
        <label class="control-label" style="font-size:inherit;width:130px;">Past Due Amount: </label>
        <label class="control-label" style="font-size:smaller;width:130px;">$ {{aging.dueoverTotalAmt}}</label>
        <label class="control-label" style="font-size:inherit;width:170px;">Customer Score: </label>
        <label class="control-label" style="font-size:smaller;width:100px;">{{aging.riskScore}}</label>
        </div>
        <div class="row">
        <label class="control-label" style="font-size:inherit;width:130px;">Country: </label>
        <label class="control-label" style="font-size:smaller;width:130px;">{{aging.country}}</label>
        <label class="control-label" style="font-size:inherit;width:130px;">Credit Balance: </label>
        <label class="control-label" style="font-size:smaller;width:200px;">$ ...</label>
        <label class="control-label" style="font-size:inherit;width:130px;">Status: </label>
        <label class="control-label" style="font-size:smaller;width:130px;">{{aging.accountStatus}}</label>
        <label class="control-label" style="font-size:inherit;width:170px;">F-Collectable Amount: </label>
        <label class="control-label" style="font-size:smaller;width:100px;">$ {{aging.fCollectAmt}}</label>
        </div>
        <div class="row">
        <label class="control-label" style="font-size:inherit;width:130px;vertical-align: top;">Special Notes: </label>
        <textarea style=" width:600px;height:60px; font-size:smaller;resize:none" ng-model="customer.specialNotes">{{customer.specialNotes}}</textarea>
        <input type="button" class="btn-default" style="width:130px;vertical-align:top" value="Save" ng-click="saveCustomer()"/>
        <label class="control-label" style="font-size:inherit;width:170px;vertical-align: top;">F-Overdue 90 Amount: </label>
        <label class="control-label" style="font-size:smaller;width:100px;vertical-align: top;">$ {{aging.fDueOver90Amt}}</label>
        <a class="control-label" style="width:20px;" href="" ng-click="showInfo();">>>></a>
        </div>
    </div>
    <div id="divAgingInfo" class="form-group col-md-10" style=" border:1px solid;border-color:#000; width:1200px;height:180px;" >
        <div class="row">
            <p class="col-md-2 control-label">Aging Info</p>
        </div>
        <table>
        <thead>
            <tr>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;height:20px;">Aging1 - 30</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging31 - 60</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging61 - 90</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging91 - 120</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging121 - 150</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging151 - 180</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging181 - 360</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging361+</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;height:20px">{{aging.due30Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{aging.due60Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{aging.due90Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{aging.due120Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{aging.due150Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{aging.due180Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{aging.due210Amt+aging.due240Amt+aging.due270Amt+aging.due300Amt+aging.due330Amt+aging.due360Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{aging.dueOver360Amt}}</td>
            </tr>
        </tbody>
        </table>
        <div class="row">
        <label class="control-label" style="font-size:inherit;width:650px; text-align:right;">Total AR Balance: </label>
        <label class="control-label" style="font-size:smaller;width:150px;text-align:right;">$ {{aging.totalAmt}}</label>
        </div>

        <table>
        <thead>
        <tr>
            <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;height:20px;">Past Due 0+</th>
            <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Past Due 30+</th>
            <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Past Due 60+</th>
            <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Past Due 90+</th>
            <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Past Due 180+</th>
            <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Past Due 360+</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;height:20px">{{aging.dueOver0Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{aging.dueOver30Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{aging.dueOver60Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{aging.dueOver90Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{aging.dueOver180Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{aging.dueOver360Amt}}</td>
        </tr>
        </tbody>
        </table>

        <div class="row">
        <label class="control-label" style="font-size:inherit;width:650px; text-align:right;">Past Due Total: </label>
        <label class="control-label" style="font-size:smaller;width:150px;text-align:right;">$ {{aging.dueoverTotalAmt}}</label>
        </div>
    </div>  

</div>
<div id="contactP" class="form-group col-md-10" >
    <div class="row">
       <p class="col-md-2 control-label">Contact Information</p><a href="" ng-click="openContactHistory();" >Contact History Records</a>
    </div>
    <div  class="contactgrid-style" ui-grid="contactList">
    </div>
</div>
<!--<div id="Div2" class="form-group col-md-10" >
    <p class="col-md-2 control-label">due date</p>
</div>-->
<div class="form-group col-md-10">
    <div class="row">
    <label>Invoice List</label>
    </div>
</div>
<div class="form-group col-md-10" style=" border:1px solid;border-color:#000; width:1200px;height:70px;">
    <div class="row" style="height:5px"></div>
    <div class="row" >
        <label for="inputInvoice" class="col-md-2 control-label">
            Invoice #:</label>
        <div class="col-md-2">
            <textarea id="inputInvoice" class="form-control" style="resize:none" ng-model="invoicenos"></textarea>
        </div>

        <label for="inputIStatus" class="col-md-2 control-label">
            Status:</label>
        <div class="col-md-2">
            <select id="inputIStatus" class="form-control input-sm" ng-model="istatus" ng-options="a.detailValue as a.detailName for a in istatuslist">
                <option value="">All</option>
            </select>
        </div>
        <!--<label for="inputCstatus" class="col-md-2 control-label">
            Cash Status:</label>
         <div class="col-md-2">
            <select id="inputCStatus" class="form-control input-sm" ng-model="cstatus" ng-options="c.detailValue as c.detailName  for c in cstatuslist">
                <option value="">All</option>
            </select>
        </div>-->
        <div class="col-md-2" style="float:right">
            <button type="button" class="btn btn-primary form-control" ng-click="searchInvoice()">
                Search</button>
        </div>
        <div class="col-md-2" style="float:right">
            <button type="button" class="btn btn-primary form-control" ng-click="resetSearch()">
                Reset</button>
        </div>
    </div>
</div>
<div class="form-group col-md-10" style=" width:1170px;>
    <div class="row">

    </div>
</div>

<div class="form-group col-md-12">
    <div class="grid-style" ui-grid="invoiceList"  ui-grid-resize-columns ui-grid-selection>
    </div>
</div>
<div class="form-group col-md-10">
    <div class="row">
       <div class="col-md-2" >
            <button type="button" class="btn btn-primary form-control" ng-click="openGenerateSoa()" style="margin-top: 20px; margin-bottom: 20px;">
                Generate SOA</button>
        </div>
        <div class="col-md-2">
            <select id="pagesize" name="pagesize" ng-model="selectedLevel" ng-options="s.id as s.levelName for s in pagelevel"
                ng-change="pagesizechange(selectedLevel)" class="form-control input-sm" style="margin-top: 20px; margin-bottom: 20px;">
            </select>
        </div>
        <pagination max-size="maxSize" items_per_page="itemsperpage" total-items="totalItems"
            ng-model="currentPage" ng-change="pageChanged()"></pagination>
    </div>
</div>

<div>
    <script type="text/ng-template" id="myModalContent1.html">
        <div class="modal-header">
            <h3 class="modal-title">Account Info</h3>
        </div>
        <div class="modal-body" style="height:400px">
        <div id="divInfo1" class="form-group col-md-10" style="height:200px;width:800px">
            <div class="row">
                <label class="control-label" style="font-size:inherit;width:130px;vertical-align: top;" >Customer Code: </label>
                <label class="control-label" style="font-size:smaller;width:130px;vertical-align: top;" >{{item.customerNum}}</label>
                <label class="control-label" style="font-size:inherit;width:130px;vertical-align: top;">Customer Name: </label>
                <label class="control-label" style="font-size:smaller;width:130px;word-break:break-all;">{{item.customerName}}</label>
                <label class="control-label" style="font-size:inherit;width:130px;vertical-align: top;">Status: </label>
                <label class="control-label" style="font-size:smaller;width:130px;vertical-align: top;">{{item.accountStatus}}</label>
            </div>
            <div class="row">
                <label class="control-label" style="font-size:inherit;width:130px;" >Customer Class: </label>
                <label class="control-label" style="font-size:smaller;width:130px;">{{item.customerClass}}</label>
                <label class="control-label" style="font-size:inherit;width:130px;">Customer Score: </label>
                <label class="control-label" style="font-size:smaller;width:130px;">{{item.riskScore}}</label>
                <label class="control-label" style="font-size:inherit;width:130px;">Legal Entity: </label>
                <label class="control-label" style="font-size:smaller;width:130px;">{{item.siteCode}}</label>
            </div>
            <div class="row">
                <label class="control-label" style="font-size:inherit;width:130px;" >Country: </label>
                <label class="control-label" style="font-size:smaller;width:130px;">{{item.country}}</label>
                <label class="control-label" style="font-size:inherit;width:130px;">State: </label>
                <label class="control-label" style="font-size:smaller;width:130px;">辽宁省</label>
                <label class="control-label" style="font-size:inherit;width:130px;">City: </label>
                <label class="control-label" style="font-size:smaller;width:130px;">大连</label>
            </div>
            <div class="row">
                <label class="control-label" style="font-size:inherit;width:130px;vertical-align: top;" >Special Notes: </label>
                <label class="control-label" style="font-size:smaller;width:395px;word-break:break-all;">{{notes}}</label>
                <label class="control-label" style="font-size:inherit;width:130px;vertical-align: top;" >Credit Limit: </label>
                <label class="control-label" style="font-size:smaller;width:130px;vertical-align: top;">$ {{item.creditLimit}}</label>
            </div>
        </div>
        <div id="divInfo2" class="form-group col-md-10" style="height:200px">
        <table style="width:800px">
        <thead>
            <tr>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;height:20px;">Aging1 - 30</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging31 - 60</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging61 - 90</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging91 - 120</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging121 - 150</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging151 - 180</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging181 - 360</th>
                <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Aging361+</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;height:20px">{{item.due30Amt}}</td>
                <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{item.due60Amt}}</td>
                <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{item.due90Amt}}</td>
                <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{item.due120Amt}}</td>
                <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{item.due150Amt}}</td>
                <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{item.due180Amt}}</td>
                <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{item.due210Amt+item.due240Amt+item.due270Amt+item.due300Amt+item.due330Amt+item.due360Amt}}</td>
                <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{item.dueOver360Amt}}</td>
            </tr>
        </tbody>
        </table>
            <div class="row">
            <label class="control-label" style="font-size:inherit;width:650px; text-align:right;">Total AR Balance: $ {{item.totalAmt}} </label>
            </div>
        <table>
        <thead>
        <tr>
        <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;height:20px;">Past Due 0+</th>
            <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Past Due 30+</th>
            <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Past Due 60+</th>
            <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Past Due 90+</th>
            <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Past Due 180+</th>
            <th style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">Past Due 360+</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;height:20px;">{{item.dueOver0Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{item.dueOver30Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{item.dueOver60Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{item.dueOver90Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{item.dueOver180Amt}}</td>
            <td style=" border:1px solid;border-color:#000;font-size:small;width:100px;text-align:center;">{{item.dueOver360Amt}}</td>
        </tr>
        </tbody>
        </table>
            <div class="row">
            <label class="control-label" style="font-size:inherit;width:650px; text-align:right;">Past Due Total: $ {{item.dueoverTotalAmt}}</label>
            </div>
        </div>
        </div>
        <div class="modal-footer">
            <button class="btn-default" ng-click="closeaccount()">Close</button>
        </div>
    </script>
</div>